<!DOCTYPE html>

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    
    <title>Demo - Izmir</title>
    
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/just-the-docs.css">
    <link rel="stylesheet" href="assets/css/izmir.css">
    <link rel="stylesheet" href="assets/css/docs.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/fa-solid.min.css">
    
    <script type="text/javascript" src="assets/js/vendor/lunr.min.js"></script>
    <script type="text/javascript" src="assets/js/just-the-docs.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>Demo | Izmir</title>
<meta name="generator" content="Jekyll v3.8.6" />
<meta property="og:title" content="Demo" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="ImageHover CSS Library" />
<meta property="og:description" content="ImageHover CSS Library" />
<link rel="canonical" href="demo.html" />
<meta property="og:url" content="demo.html" />
<meta property="og:site_name" content="Izmir" />
<script type="application/ld+json">
{"@type":"WebPage","headline":"Demo","url":"demo.html","description":"ImageHover CSS Library","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->

</head>



<body class="home">

    <header class="home-header">
        <div class="home-wrapper">
            <h1 class="entry-title">Izmir Hover Effects</h1>
            <h4 class="entry-subtitle">A Mini CSS Library</h4>
            <a href="1A-getting-started.html" class="btn">View Documentation</a>
        </div>
    </header>

    <div id="main-content" class="home-content home-wrapper" role="main">
        <div class="col-3">
  <div class="col-item">
    <figure class="c4-izmir c4-border-bottom-left c4-image-rotate-right c4-gradient-bottom-right" tabindex="0" style="--primary-color: #f12711; --secondary-color: #f5af19; --image-opacity: .1;">
      <img src="assets/images/image04.jpg" alt="Sample Image" />
      <figcaption class="c4-layout-bottom-left">
        <div class="c4-reveal-right c4-delay-100">
          <h2>
            Creative Control
          </h2>
        </div>
      </figcaption>
    </figure>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-cc-3 c4-image-zoom-out c4-gradient-bottom-right" tabindex="0" style="--primary-color: #7303c0; --secondary-color: #ec38bc;">
      <img src="assets/images/image06.jpg" alt="Sample Image" />
      <figcaption>
        <div class="c4-rotate-up-right c4-delay-200">
          <h2>
            Endless
          </h2>
        </div>
        <div class="c4-rotate-down-left c4-delay-200">
          <h2>
            Possibilities
          </h2>
        </div>
      </figcaption>
    </figure>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-right c4-image-pan-left c4-gradient-top" tabindex="0" style="--primary-color: #000046; --secondary-color: #1CB5E0; --text-color: #fdeff9; --border-color: #fdeff9;">
      <img src="assets/images/image05.jpg" alt="Sample Image" />
      <figcaption class="c4-layout-top-right">
        <div class="c4-reveal-left">
          <h2>
            Compose
          </h2>
        </div>
        <div class="c4-reveal-left c4-delay-200">
          <h2>
            Design
          </h2>
        </div>
        <div class="c4-reveal-left c4-delay-400">
          <h2>
            Style
          </h2>
        </div>
      </figcaption>
    </figure>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-cc-1 c4-image-zoom-out c4-gradient-bottom-right" tabindex="0" style="--primary-color: #02AAB0; --secondary-color: #00CDAC; --border-color: #e1f0e4; --text-color: #e1f0e4;">
      <img src="assets/images/image02.jpg" alt="Sample Image" />
      <figcaption class="c4-layout-bottom-right">
        <div class="c4-reveal-left c4-delay-800">
          <h2>
            Build Your Own
          </h2>
        </div>
      </figcaption>
    </figure>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-center c4-image-zoom-in c4-gradient-top" tabindex="0" style="--primary-color: #e52d27; --secondary-color: #b31217; --text-color: #fdeff9; --border-color: #fdeff9; --image-opacity: .1;">
      <img src="assets/images/image07.jpg" alt="Sample Image" />
      <figcaption class="">
        <div class="c4-fade-up">
          <h2>
            Responsive
          </h2>
        </div>
      </figcaption>
    </figure>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-border-corners-1 c4-image-zoom-out c4-gradient-bottom" tabindex="0" style="--primary-color: #E0EAFC; --secondary-color: #CFDEF3; --text-color: #1f467b; --border-color: #1f467b; --image-opacity: .1;">
      <img src="assets/images/image08.jpg" alt="Sample Image" />
      <figcaption class="c4-layout-top-left">
        <div class="c4-reveal-down">
          <div>
            <h2 style="margin-bottom: 5px;">
              Creative Control
            </h2>
            <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
          </div>
        </div>
      </figcaption>
    </figure>
  </div>
  <div class="col-item">
        <figure class="c4-izmir c4-border-vert c4-gradient-top-right c4-image-zoom-in" style="--primary-color: #0fa5ac; --secondary-color: #5f48a2;">
			<img src="assets/images/image09.jpg" alt="Sample Image" />
            <figcaption class="c4-layout-center-center">
                <div class="c4-izmir-title-wrapper c4-reveal-up">
                    <h2 class="c4-izmir-title">
                        Lorem ipsum dolor
                    </h2>
                </div>
				<div class="c4-izmir-caption-wrapper c4-reveal-down">
					<p class="c4-izmir-caption">Donec nec justo eget felis facilisis fermentum.</p>
				</div>
			</figcaption>
		</figure>
    </div>
    <div class="col-item">
        <figure class="c4-izmir c4-border-cc-2 c4-gradient-bottom-left c4-image-zoom-in" style="--primary-color: #ef6698; --secondary-color: #4028ac;">
            <img src="assets/images/image10.jpg" alt="Sample Image" />
            <figcaption class="c4-layout-center-center">
                <div class="c4-izmir-icon-wrapper c4-fade">
                    <i class="fas fa-plus fa-3x"></i>
                </div>
            </figcaption>
        </figure>
    </div>
    <div class="col-item">
        <figure class="c4-izmir c4-border-left c4-gradient-top-right c4-image-pan-right" style="--primary-color: #4ca2cd; --secondary-color: #65af6f;">
            <img src="assets/images/image11.jpg" alt="Sample Image" />
            <figcaption class="c4-layout-top-left">
                <div class="c4-izmir-icon-wrapper c4-reveal-right">
                    <i class="fas fa-link fa-2x"></i>
                </div>
            </figcaption>
        </figure>
    </div>
    <div class="col-item">
        <figure class="c4-izmir c4-border-left c4-gradient-top-right c4-image-pan-left" style="--primary-color: #f5af19; --secondary-color: #f12711;">
          <img src="assets/images/image12.jpg" alt="Sample Image" />
          <figcaption class="c4-layout-center-center">
            <div class="c4-izmir-title-wrapper c4-reveal-left">
              <h2 class="c4-izmir-title">Lorem ipsum</h2>
            </div>
          </figcaption>
        </figure>
    </div>
    <div class="col-item">
        <figure class="c4-izmir c4-border-corners-1 c4-gradient-bottom-left c4-image-zoom-out" style="--primary-color: #16A085; --secondary-color: #F4D03F;--border-width: 6px;">
            <img src="assets/images/image14.jpg" alt="Sample Image" />
            <figcaption class="c4-layout-center-center">
                <div class="c4-izmir-icon-wrapper c4-fade c4-delay-300">
                    <i class="fas fa-plus fa-3x"></i>
                </div>
            </figcaption>
        </figure>
    </div>
    <div class="col-item">
        <figure class="c4-izmir c4-border-vert c4-gradient-top c4-image-zoom-in" style="--primary-color: #4D516C; --secondary-color: #73799F;">
          <img src="assets/images/image13.jpg" alt="Sample Image" />
          <figcaption class="c4-layout-center-center">
            <div class="c4-izmir-title-wrapper c4-fade c4-delay-300">
              <h2 class="c4-izmir-title">Donec nec justo</h2>
            </div>
          </figcaption>
        </figure>
    </div>
</div>


        
    </div>

</body>

</html>
